/**
 * 热力图
 */
/**
 * 象形符号等级专题图
 * 说明：表达意义同等级符号专题图，符号不再是圆，
 * 而是根据指标进行推荐响应的图形，如人口数用人
 * 展示，企业数用企业图表展示等
 */
import sgisLayerBase from '../../sfgis.layer.base';
import styleModify from '../macrolayers/echarts.stylemodify.js';
export default {
  heatmapLayer: '',
  heatColor: [
    ["rgba(137, 204, 103,0)","rgba(136,171,255,0.8)","rgba(101,229,235,1)", "rgb(137, 204, 103)", "rgb(244, 250, 176)", "rgb(246, 124, 74)", "rgb(165, 0, 38)"],
    ["rgba(33,102,172,0)", "rgba(103,169,207,0.8)","rgb(103,169,207)", "rgb(209,229,240)", "rgb(253,219,199)", "rgb(239,138,98)", "rgb(178,24,43)"],
    ["rgba(255, 255, 204,0)","rgba(199, 233, 180,0.8)", "rgb(199, 233, 180)", "rgb(127, 205, 187)", "rgb(65, 182, 196)", "rgb(44, 127, 184)", "rgb(37, 52, 148)"],
    ["rgba(237, 248, 251,0)", "rgba(191, 211, 230,0.8)", "rgb(191, 211, 230)", "rgb(158, 188, 218)", "rgb(140, 150, 198)", "rgb(136, 86, 167)", "rgb(129, 15, 124)"],
    ["rgba(254, 239, 216,0)", "rgba(253, 211, 157,0.8)","rgb(253, 211, 157)", "rgb(253, 167, 113)", "rgb(241, 108, 75)", "rgb(206, 36, 23)", "rgb(143, 0, 0)"],
    ["rgba(242, 233, 244,0)", "rgba(206, 208, 230,0.8)", "rgb(206, 208, 230)", "rgb(138, 180, 214)", "rgb(62, 148, 195)", "rgb(2, 124, 126)", "rgb(1, 84, 67)"]
  ], // 热力图配色方案
  layerNum: 0, // 图多能叠加10个，过多时提示移除，防止太卡
  colorNum:0,
  // 重置数据个数
  resetlayerNum() {
    this.layerNum = 0;
  },
  // 初始化图层信息
  initLayer(map, data) {
    const heatLayerInfo = {};
    heatLayerInfo.layerId = "heatLayer_" + data.id + new Date().getTime();
    heatLayerInfo.layer = "";
    return heatLayerInfo;
  },
  // 绘制图层
  renderLayer(map, data, item) {
    this.colorNum = item.sort;
    /** 添加新热力图开始 **/
    // 为热力图添加source
    const sourceId = item.layerId + "_source";
    // 格式化data为geojson
    const heatJson = {
      "type": "FeatureCollection",
      "features": []
    };
    let max = 0;
    if (data.data !== null && data.data !== undefined) {
      for (let i = 0; i < data.data.length; i++) {
        const temp = data.data[i];
        if(parseFloat(temp[2]) > max){
          max = parseFloat(temp[2]);
        }
        const feature = {
          "type": "feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              parseFloat(temp[1]),
              parseFloat(temp[0])
            ]
          },
          "properties": {
            "value": parseFloat(temp[2])
          }
        };
        heatJson.features.push(feature);
      }
    }
    map.addSource(sourceId, {
      "type": "geojson",
      "data": heatJson
    });
    // 添加热力图
    // eslint-disable-next-line eqeqeq
    const heatCorlors = this.heatColor[this.colorNum]? this.heatColor[this.colorNum] : this.heatColor[this.colorNum%this.heatColor.length];
    map.addLayer({
      "id": item.layerId,
      "type": "heatmap",
      "source": sourceId,
      "maxzoom": 17,
      "paint": {
        "heatmap-weight": [
          "interpolate",
          ["linear"],
          ["get", "value"],
          0, 0,
          6, 1
        ],
        "heatmap-intensity": [
          "interpolate",
          ["linear"],
          ["zoom"],
          0, 1,
          22, 3
        ],
        "heatmap-color": [
          "interpolate",
          ["linear"],
          ["heatmap-density"],
          0, heatCorlors[0],
          0.15, heatCorlors[1],
          0.3, heatCorlors[2],
          0.6, heatCorlors[3],
          0.8, heatCorlors[4],
          0.9, heatCorlors[5],
          1, heatCorlors[6]
        ],
        "heatmap-radius": [
          "interpolate",
          ["linear"],
          ["get", "value"],
          3, 10,
          20, 30
        ],
        "heatmap-opacity": [
          "interpolate",
          ["linear"],
          ["zoom"],
          0, 1,
          22, 1
        ]
      }
    });
    /** 添加新热力图结束 **/
    const headtmapMarkers = map.getLayer(item.layerId);
    const heatmapLayer = headtmapMarkers;
    this.heatmapLayer = heatmapLayer;
    heatmapLayer.setVisible = this.setVisible; // 添加设置可见性函数
    heatmapLayer.setOpacity = this.setOpacity; // 添加设置图层透明度函数
    heatmapLayer.setZIndexOffset = this.setZIndexOffset; // 设置图层顺序函数

    const heatmapLayerInfo = {};
    heatmapLayerInfo.layerId = item.layerId;
    const zIndex = styleModify.curZindex - item.sort;// 结果展示多个结果导致图层顺利不固定问题
    styleModify.layerOrder[heatmapLayerInfo.layerId] = zIndex;
    heatmapLayer.layerNum = item.sort;
    heatmapLayer.name = data.name;

    heatmapLayerInfo.name = data.name;

    heatmapLayerInfo.type = 'heatLayer';
    heatmapLayerInfo.html = this.calGraph(heatmapLayer, item.layerId);
    heatmapLayerInfo.show = data.showThumbnails !== false;
    map.overlayerInfos[item.layerId] = heatmapLayerInfo;
    map.overlayers[item.layerId] = heatmapLayer;

    sgisLayerBase.setOverLayers(heatmapLayerInfo);
  },
  /**
   *
   * @param {Object} laryer
   * @param {String} colorParam
   */
  setVisible(visible, map, layer) {
    if (visible === "visible") { // 显示图层
      map.setLayoutProperty(layer.id, 'visibility', 'visible');
    } else if (visible === "hidden") {  // 隐藏图层
      map.setLayoutProperty(layer.id, 'visibility', 'none');
    } else {
      return;
    }
  },
  /* *设置图层透明度 */
  // eslint-disable-next-line no-unused-vars
  setOpacity(opacity, map, layer) {
    // map.setPaintProperty(layer.id, 'raster-opacity', opacity / 100);
  },
  /** 设置调整图层顺序函数*/
  // eslint-disable-next-line no-unused-vars
  setZIndexOffset(index) {
    console.log("暂时不做图层调整");
    // styleModify.setZIndexOffset(index, this.layerId, this.rootCanvas);
  },
  calGraph(heatLayer, layerId) {
    // eslint-disable-next-line no-unused-vars,eqeqeq
    const heatCorlors = this.heatColor[this.colorNum]? this.heatColor[this.colorNum] : this.heatColor[this.colorNum%this.heatColor.length];
    const html = `
      <div class='chart_item'  style = 'line-height:90px;text-align:center;' class=${layerId}>
        <div style = 'width:45px;height:45px;background:radial-gradient(${heatCorlors[5]}, ${heatCorlors[4]}, ${heatCorlors[3]},${heatCorlors[2]},${heatCorlors[1]},${heatCorlors[1]});border-radius:45px'> </div>
        <p style='left: 50px;'>${heatLayer.name || '热力图'}</p>
      </div>
    `;
    return html;
  },
  autoCalgraph(layerId, color) {
    const itemColor = color;
    const emphsisColor = 'red';
    const html = `
     <div class="${layerId}" style='text-align:center;padding:10px;line-height :50px'>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px;' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
     </div>
    `;
    const layers = sgisLayerBase.overLayers;
    for (const key in layers) {
      if (layers[key].layerId === layerId) {
        layers[key].html = html;
      }
    }
  }
};
